import React from 'react';
import { Row, Col } from 'antd';
import { rectangle, action, setting, del } from '../utils/icon';
import { NODE } from '../utils/constants';
import useDragToCreateNode from '../hook/useDragToCreateNode';

import { EDGE_TYPE } from 'src/utils/constant';
import * as events from 'src/utils/event/componentEvent';
import './NodeMenu.less';

export default function(props) {
  const { handleDown, _cur } = useDragToCreateNode(props);
  const size = 16;
  function remove() {
    if (props._graph && props._graph.current) {
      const id = props._graph.current._nodeMenu.id;
      const currentNode = props._graph.current.findById(id);
      const inEdges = currentNode.getInEdges();
      const sources = inEdges.map((it) => {
        const { source } = it.getModel();
        return props._graph.current.findById(source);
      });
      sources.forEach((sourceNode) => {
        const outEdeges = sourceNode.getOutEdges();
        if (outEdeges.length === 2) {
          outEdeges.forEach((it) => {
            const { label, ...config } = it.getModel();
            props._graph.current.update(it, { ...config, label: '', percent: null });
          });
          const { id, edge_type, edge_configs, ...config } = sourceNode.getModel();
          updateNode(id, { edge_type: EDGE_TYPE._CONDITION, ...config, edge_configs: [] });
        }
      });

      props._graph.current.removeItem(currentNode);
      props._graph.current._nodeMenu.style.display = 'none';
    }
  }
  // 更新node
  function updateNode(id, config) {
    const item = props._graph.current.findById(id);
    props._graph.current.update(item, { ...config });
  }
  function openSetting() {
    console.log(props, 777);
    if (props._graph && props._graph.current) {
      const id = props._graph.current._nodeMenu.id;
      const currentNode = props._graph.current.findById(id);
      const model = currentNode.getModel();
      const { shape } = model;
      if (shape === NODE._STRATEGY) {
        events.eventEmitter.emit(events.OPEN_STRATEGY_NODE, {
          data: {
            ...model,
          },
          actionType: 'update',
          modelTitle: '编辑规则节点',
        });
      } else if (shape === NODE._ACTION) {
        events.eventEmitter.emit(events.OPEN_ACTION_NODE, {
          data: {
            ...model,
          },
          actionType: 'update',
          modelTitle: '编辑动作节点',
        });
      } else if (shape === NODE._CHALLENGE) {
        events.eventEmitter.emit(events.OPEN_CHALLENGE_NODE, {
          data: {
            ...model,
          },
          actionType: 'update',
          modelTitle: '编辑冠军挑战节点',
        });
      }
    }
  }

  // function copyIt() {
  //   if (props._graph && props._graph.current) {
  //     const nodes = props._graph.current.findAll('node', (node) => {
  //       return node.get('model');
  //     });
  //     const names = nodes.map((it) => it.getModel().name);
  //     const id = props._graph.current._nodeMenu.id;
  //     const currentNode = props._graph.current.findById(id);
  //     const model = currentNode.getModel();
  //     if (model.shape === NODE._STRATEGY) {
  //       const copyModel = Object.assign({}, JSON.parse(JSON.stringify(model)), {
  //         id: randomKey(),
  //         name: createCopyName(model.name, '-副本', names),
  //         label: createCopyName(model.name, '-副本', names),
  //         x: model.x + 150,
  //       });
  //       events.eventEmitter.emit(events.OPEN_STRATEGY_NODE, {
  //         data: {
  //           ...copyModel,
  //         },
  //         actionType: 'copy',
  //         modelTitle: '复制节点',
  //       });
  //     } else if (model.shape === NODE._CHALLENGE) {
  //       const challengeNodes = model.challengeNodes.map((it) => {
  //         const item = JSON.parse(JSON.stringify(it));
  //         item.id = randomKey();
  //         return item;
  //       });
  //       const copyModel = Object.assign({}, JSON.parse(JSON.stringify(model)), {
  //         id: randomKey(),
  //         name: createCopyName(model.name, '-副本', names),
  //         label: createCopyName(model.name, '-副本', names),
  //         x: model.x + 300,
  //         challengeNodes,
  //       });
  //       props._graph.current.addItem('node', { ...copyModel });
  //     } else if (model.shape === NODE._CROSS) {
  //       const copyModel = Object.assign({}, JSON.parse(JSON.stringify(model)), {
  //         id: randomKey(),
  //         name: createCopyName(model.name, '-副本', names),
  //         label: createCopyName(model.name, '-副本', names),
  //         x: model.x + 150,
  //       });
  //       props._graph.current.addItem('node', { ...copyModel });
  //     }
  //   }
  // }

  return (
    <>
      <Row gutter={3}>
        <Col>
          <div className='tool-menu'>
            <div className='tool-menu-item' onMouseDown={handleDown.bind(this, NODE._STRATEGY)}>
              <img src={rectangle} alt='规则' style={{ width: size + 'px', height: size + 'px' }} />
            </div>
            <div className='tool-menu-item' onMouseDown={handleDown.bind(this, NODE._ACTION)}>
              <img src={action} alt='动作' style={{ width: size + 'px', height: size + 'px' }} />
            </div>
          </div>
        </Col>
        <Col id='operaterMenus'>
          <div className='tool-menu'>
            <div className='tool-menu-item' onClick={() => openSetting()}>
              <img src={setting} alt='设置' style={{ width: size + 'px', height: size + 'px' }} />
            </div>
            <div className='tool-menu-item' onClick={() => remove()}>
              <img src={del} alt='删除' style={{ width: size + 'px', height: size + 'px' }} />
            </div>
          </div>
        </Col>
      </Row>
      {_cur}
    </>
  );
}
